<style>
  .one,.two{
    border:1px solid red;
    margin:20px;
    padding:20px;
    min-height:100px;
  }
</style>
<!---Included External JS library------->
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>

<!---Internal JS Code------->
<script type="text/javascript">
  $(document).ready(function(){

    $('#submitId').on('click',function(){

      var onehtml = $('#fading').text();
      $('.two').text(onehtml);
      $('#fading').fadeOut(2000);
      $('#fade_in').fadeIn(2000);
    });


  });
</script>

<div class="one">
  <div id="fading">
This is some data in div1.This is some data in div1.<span style="color:green">This is some data in div1 in div1.</span>
This is some data in div1.This is some data in div1.This is some data in div1.This is some data in div1.
This is some data in div1.This is <a href="#">link</a> some data in div1.This is some data in div1.This is some data in div1.
  </div>
</div>

<div class="two"> </div>

  <div id="fade_in" style="display:none;">
This is some data in div1.This is some data in div1.<span style="color:green">This is some data in div1 in div1.</span>
This is some data in div1.This is some data in div1.This is some data in div1.This is some data in div1.
This is some data in div1.This is <a href="#">link</a> some data in div1.This is some data in div1.This is some data in div1.
  </div>


<input type="submit" id="submitId" name="submit" value="Copy Data from div 1 to div 2!!" />
